import React, { useState, useLayoutEffect, useEffect, PureComponent, forwardRef, useContext, createContext, useReducer, memo, useCallback, useMemo, useRef, useImperativeHandle } from 'react'
export default function Test() {
  const [counter, setCounter] = useState(10)
  // 2.在dom更新完成后回调
  // useEffect(() => {
  //   if (counter === 0) {
  //     setCounter(100)
  //   }
  // }, [counter])

  // 1.会阻塞Dom渲染
  useLayoutEffect(() => {
    if (counter === 0) {
      setCounter(100)
    }
  }, [counter])

  return (
    <>
      <div> 此时的值：{counter}</div>
      <hr />
      <button onClick={() => setCounter(0)}>点击</button>
      <hr />
    </>
  )
}
